Skip to content

Conversation

@matthewlipski
Copy link
Collaborator

@matthewlipski matthewlipski commented Aug 25, 2025

This PR updates TailwindCSS and ShadCN to the newest versions, and also changes the overall setup for the @blocknote/shadcn package.

Currently, we import Tailwind styles in @blocknote/shadcn/src/style.css. This generates CSS from all of the utility classes that Tailwind detects in the code, and that has multiple issues:

  • Creates duplicate CSS rules in applications which already import Tailwind styles themselves.
  • BlockNote doesn't respect the Tailwind/ShadCN theme of the parent application.
  • We have to scope the BlockNote Tailwind CSS to prevent conflicts (which is why we have things like the bn- prefix).

In practice, this doesn't make sense. We expect @blocknote/shadcn to be used in an app that already uses Tailwind, and probably ShadCN. Therefore, it doesn't make sense to include Tailwind at all in the package, and should instead rely on the parent application to handle importing the Tailwind styles. This way, all of the above issues are resolved.

There is one caveat to this - Tailwind only generates CSS based on the utility classes it finds in your code, which is why we previously needed to include that generated CSS in the built files. Since the @blocknote/shadcn package is buried inside node_modules, Tailwind doesn't check the code there, and there is no way to guarantee that the parent app would use all of the utility classes that BlockNote uses to generate all the necessary CSS. However, Tailwind v4 introduced the @source directive for this exact purpose, so the parent app can now point Tailwind to the code in @blocknote/shadcn and generate all the additional CSS needed.

So this PR removes the Tailwind dependency from the @blocknote/shadcn package, and the parent app is instead expected to handle it. Even if the parent app doesn't use ShadCN and only uses Tailwind, the worst case is that you have to paste some CSS from here to set up the theme. In our case, the ShadCN example is responsible for importing Tailwind styles and setting up the ShadCN theme.

@vercel
Copy link

vercel bot commented Aug 25, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
blocknote Ready Ready Preview Aug 28, 2025 1:59pm
blocknote-website Ready Ready Preview Aug 28, 2025 1:59pm

@pkg-pr-new
Copy link

pkg-pr-new bot commented Aug 25, 2025

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1959

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1959

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1959

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1959

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1959

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1959

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1959

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@1959

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1959

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@1959

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1959

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1959

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1959

commit: 7da2833

* Removed prefix

* Removed Tailwind dependency from ShadCN package

* Removed unneeded ShadCN things from playground

* Removed `tailwind-merge` dep from playground

* Moved tailwind import & shadcn theme from playground to example

* Small fix

* Fixed docs
Copy link
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@matthewlipski matthewlipski merged commit 7a66f11 into main Aug 28, 2025
8 checks passed
@matthewlipski matthewlipski deleted the tailwind-update branch August 28, 2025 15:24
@YousefED
Copy link
Collaborator

nice! @matthewlipski does this close any open issues?

@matthewlipski
Copy link
Collaborator Author

Good point! Closes #1248

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants